extends layout

block content
	body.home-page
		.select-room-container.box-container.clearfix
			.inner-padding.clearfix
				img.logo(src='/img/logo.png', width='217', height='239', alt='Logo')
				.clear
				.rooms-block
					h4 Select a room:
					.room-list.hide-inactive
						each room,index in rooms
							- var roomClass = room.online > 0 ? "room-active" : "room-inactive";
							- var word = room.online == 1 ? "user" : "users";
							a(href='/' + room.key, class="#{roomClass}", title="#{room.name}")
								| #{room.name.substr(0,20)}
								span.users-online
									| #{room.online} #{word}
					.inactive
						input(type='checkbox', id="hide-inactive", checked) 
						label(for="hide-inactive") Hide inactive
				.create-room-block
					h4
						em or
						| Create a new one:
					form(method="POST",action="/create")
						p
							input.text-grey(type='text', name='room_name', value='', placeholder='Name of your room')
						input.button(type='submit', value='Create now')



		footer
			| Balloons.IO is an 
			a(href='https://github.com/gravityonmars/Balloons.IO', target="_blank") Open Source project 
			| developed by 
			a(href='http://twitter.com/gravityonmars', target="_blank") Gravity On Mars.
		script
			$('#hide-inactive').click(function(ev) {
				$('.room-list').toggleClass('hide-inactive');
			});
